<!-- 安全评价机构信息详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                    <span style="margin-left: 10px;">
                        <el-button v-if="editor" type="primary" size="mini" @click="update">编 辑</el-button>
                        <el-button v-if="!editor" type="warning" size="mini" @click="save">保 存</el-button>
                        <el-button v-if="!editor" plain type="primary" size="mini" @click="cancel">取 消</el-button>
                    </span>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">机构名称：</span>
                            <span v-if="editor">{{ safety.agentName }}</span>
                            <span><el-input v-if="!editor" v-model="safety.agentName" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">统一社会信用代码/注册号：</span>
                            <span v-if="editor">{{ safety.agentCode }}</span>
                            <span><el-input v-if="!editor" v-model="safety.agentCode" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">办公地址：</span>
                            <span v-if="editor">{{ safety.address }}</span>
                            <span><el-input v-if="!editor" v-model="safety.address" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">邮政编码：</span>
                            <span v-if="editor">{{ safety.zipCode }}</span>
                            <span><el-input v-if="!editor" v-model="safety.zipCode" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">机构信息公开网址：</span>
                            <span v-if="editor">{{ safety.web }}</span>
                            <span><el-input v-if="!editor" v-model="safety.web" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">法定代表人：</span>
                            <span v-if="editor">{{ safety.legalRep }}</span>
                            <span><el-input v-if="!editor" v-model="safety.legalRep" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">联系人：</span>
                            <span v-if="editor">{{ safety.contacts }}</span>
                            <span><el-input v-if="!editor" v-model="safety.contacts" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">联系电话：</span>
                            <span v-if="editor">{{ safety.mobile }}</span>
                            <span><el-input v-if="!editor" v-model="safety.mobile" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">专职技术负责人：</span>
                            <span v-if="editor">{{ safety.technicalDirector }}</span>
                            <span><el-input v-if="!editor" v-model="safety.technicalDirector" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">过程控制负责人：</span>
                            <span v-if="editor">{{ safety.processControl }}</span>
                            <span><el-input v-if="!editor" v-model="safety.processControl" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">资质证书编号：</span>
                            <span v-if="editor">{{ safety.qualifiCertifiId }}</span>
                            <span><el-input v-if="!editor" v-model="safety.qualifiCertifiId" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">发证日期：</span>
                            <span v-if="editor">{{ safety.issueTime }}</span>
                            <el-date-picker v-if="!editor" v-model="safety.issueTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">业务范围：</span>
                            <span v-if="editor"><el-input v-model="safety.businessScope" type="textarea" readonly /></span>
                            <span><el-input v-if="!editor" v-model="safety.businessScope" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" /></span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 本机构的安全评价师 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>本机构的安全评价师</span>
                    <span><el-button style="margin-left: 10px;" type="success" plain size="mini" @click="showAddEvaluator">添加</el-button></span>
                </div>
            </div>
            <div>
                <el-table border stripe :data="SafeEvaluator" style="width: 60%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column prop="evalueProfName" align="center" label="姓名" width="90" />
                    <el-table-column prop="evalueProfMajor" align="center" label="专业" width="200" />
                    <el-table-column prop="evalueProfCertifi" align="center" label="证书号码" />
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="editSafeEvaluator(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteEvaluator(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 机构违法受处罚信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>机构违法受处罚信息</span>
                </div>
            </div>
            <div>
                <el-table border stripe :data="PunishmentInfo" style="width: 90%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column prop="illegaAction" align="center" label="违法事实" />
                    <el-table-column prop="punishment" align="center" label="处罚决定" />
                    <el-table-column prop="punishTime" align="center" label="处罚时间" />
                    <el-table-column prop="enforceAgen" align="center" label="执法机关" />
                </el-table>
            </div>
        </div>
        <!-- 添加安全评价师弹框 -->
        <el-dialog title="添加安全评价师" :visible.sync="dialogVisible1" width="30%" center>
            <el-form ref="addForm" :model="Evaluator" :rules="rules">
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="姓名:" prop="evalueProfName">
                            <el-input v-model="Evaluator.evalueProfName" prefix-icon="el-icon-edit" placeholder="请输入评价师姓名" clearable style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="专业:" prop="evalueProfMajor">
                            <el-input v-model="Evaluator.evalueProfMajor" prefix-icon="el-icon-edit" placeholder="请输入评价师专业" clearable style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="证书号码:" prop="evalueProfCertifi">
                            <el-input v-model="Evaluator.evalueProfCertifi" prefix-icon="el-icon-edit" placeholder="请输入证书号码" clearable style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="doAddEvaluator">确 认 添 加</el-button>
            </span>
        </el-dialog>
        <!-- 编辑安全评价师弹框 -->
        <el-dialog title="编辑安全评价师" :visible.sync="dialogVisible" width="30%" center>
            <div class="tag">
                <el-tag>姓名</el-tag>
                <el-input v-model.trim="safeEvaluatorList.evalueProfName" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div class="tag">
                <el-tag>专业</el-tag>
                <el-input v-model.trim="safeEvaluatorList.evalueProfMajor" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div class="tag">
                <el-tag>证书编号</el-tag>
                <el-input v-model.trim="safeEvaluatorList.evalueProfCertifi" clearable style="margin-left: 8px; width: 300px;" @input="change($event)" />
            </div>
            <span slot="footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'SafetyEvaluationOrganizationDetails',
    data() {
        return {
            PunishmentInfo: [],
            safeOrgId: '',
            safety: {},
            editor: true,
            SafeEvaluator: [],
            dialogVisible: false,
            dialogVisible1: false,
            safeEvaluatorList: {},
            Evaluator: {},
            rules: { // 校验,与prop名对应
                evalueProfName: [
                    { required: true, trigger: 'blur', message: '请输入评价师姓名' }
                ],
                evalueProfMajor: [
                    { required: true, trigger: 'blur', message: '请输入评价师专业' }
                ],
                evalueProCertifi: [
                    { required: true, trigger: 'blur', message: '请输入证书号码' }
                ]
            }
        }
    },
    created() {
        this.initSafety()
        this.safeOrgId = parseInt(this.$route.query.id) // 初始获取'机构评价师'id转换
        this.Evaluator.safeOrgId = parseInt(this.$route.query.id) // 添加一个'机构评价师'id转换
        this.punAgentId = parseInt(this.$route.query.id) // 初始获取'机构违法受处罚'id转换
        this.initSafeEvaluator()
        this.initPunishmentInfo()
    },
    methods: {
        initSafety() { // 分页获取安全评价机构信息
            var obj = {page: 1, size: 2, agentName: this.$route.query.agentName}
            this.getRequest('/system/safeAgent/getSafeEvalueInfo', obj).then(resp => {
                if (resp) {
                    this.safety = resp.data.data[0]
                }
            })
        },
        initPunishmentInfo() { // 初始获取’机构违法受处罚‘信息
            this.getRequest('/system/safeAgent/getOrgPunishmentInfo/' + this.punAgentId).then(resp => {
                if (resp) {
                    this.PunishmentInfo = resp.data.obj
                }
            })
        },
        saveEdit() { // 确认保存编辑的'机构评价师'信息
            this.putRequest('/system/safeAgent/updateSafeEvalutor', this.safeEvaluatorList).then(resp => {
                if (resp) {
                    this.dialogVisible = false
                    Message.success('更新成功')
                    this.initSafeEvaluator()
                }
            })
        },
        doAddEvaluator() { // 添加’本机构安全评价师‘确认按钮绑定事件
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/safeAgent/addSafeEvalutor', this.Evaluator).then(resp => {
                        if (resp) {
                            this.dialogVisible1 = false
                            Message.success('添加成功')
                            this.initSafeEvaluator()
                        }
                    })
                }
            })
        },
        deleteEvaluator(data) { // 删除一个’本机构安全评价师‘
            this.$confirm('此操作将永久删除  ' + data.evalueProfName + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/safeAgent/deleteSafeEvalutor/', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initSafeEvaluator()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initSafeEvaluator() { // 初始获取’本机构安全评价师‘信息
            this.getRequest('/system/safeAgent/getSafeEvalutorInfo/' + this.safeOrgId).then(resp => {
                if (resp) {
                    this.SafeEvaluator = resp.data.obj
                }
            })
        },
        showAddEvaluator() { // 添加评价师按钮绑定弹窗事件
            this.dialogVisible1 = true
        },
        change() {
            this.$forceUpdate()
        },
        editSafeEvaluator(index, data) { // 编辑安全评价师
            Object.assign(this.safeEvaluatorList, data)
            this.dialogVisible = true
        },
        update() {
            this.editor = false
        },
        cancel() {
            this.editor = true
        },
        save() {
            this.editor =  !this.editor
            this.putRequest('/system/safeAgent/updateSafeEvaluAgent', this.safety).then(resp => {
                if (resp) {
                    Message.success('更新成功')
                    // this.safety = this.query
                    this.initSafeEvaluator()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.name {
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.updateProfGroup {
    width: 200px;
    margin-left: 8px;
}
.tag {
    margin-top: 20px;
    margin-left: 30px;
}
.el-input {
    width: 250px;
}
</style>
